<template>
  <div :id="props.editorId" style="height: 100%; width: 100%; overflow: hidden">
    <q-btn-dropdown
      v-model="btnMenu"
      dense
      flat
      no-icon-animation
      dropdown-icon="settings"
      size="xs"
      class="absolute-bottom-right z-index-3"
    >
      <q-list  class="q-pb-sm" dense>
        <q-item-label header>编辑器设置</q-item-label>
        <q-item dense>
          <q-item-section>
            <q-item-label>Battery too low</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-input dense filled v-model="id"/>
          </q-item-section>
        </q-item>
        <q-item dense>
          <q-item-section>
            <q-item-label>Battery too low</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-input dense filled v-model="type"/>
          </q-item-section>
        </q-item>
        <q-item dense tag="label" v-ripple>
          <q-item-section>
            <q-item-label>Battery too low</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-toggle color="blue" v-model="notif1" val="battery" />
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import * as monaco              from 'monaco-editor';
import {  getTempFile } from 'src/api/SysApi';
import { Notify }           from 'quasar';
import { useTemplateStore } from 'stores/templateStore';
import { getFile }          from 'src/api/FileApi';

let editor: monaco.editor.IStandaloneCodeEditor | null = null;
const btnMenu = ref(false);
const notif1 = ref(false);
const refreshContent = () => {
  if (!props.path) {
    // console.log('props.tempName + props.tempType',props.tempName +'==='+ props.tempType);
    getTempFile(props.tempName + props.tempType, true).then((res: string) => {
      editor?.setModel(
        monaco.editor.createModel(editor?.getValue(), props.tempType)
      );
    });
  }
};
const saveEditorContent = () => {
  let data = editor?.getValue();
  if (data) {
    window.ipcCom
      .saveFileText(props.path, editor?.getValue())
      .then((res: string) => {
        Notify.create({
          message: res,
        });
      });
  }
};
const getEditorContent = () => {
  return editor?.getValue();
};
let debounceTimer: NodeJS.Timeout | null = null;
onMounted(() => {
  // console.log(`去找到${props.editorId}的元素：`);
  let editorElement = document.getElementById(props.editorId) as HTMLDivElement;
  // console.log(`${JSON.stringify(editorElement)}`);
  editor = monaco.editor.create(editorElement, {
    language: props.tempType,
    lineNumbers: 'off',
    lineDecorationsWidth: 0,
    scrollbar: {
      vertical: 'hidden',
      horizontal: 'hidden',
    },
    readOnly: false,
    minimap: {
      // 关闭代码缩略图
      enabled: true, // 是否启用预览图
    },
    scrollBeyondLastLine: false,
    automaticLayout: true,
    overviewRulerBorder: false,
    contextmenu: false,
  });
  refreshContent();
  const resizeObserver = new ResizeObserver(() => {
    // 在这里添加你想要执行的改变大小的逻辑
    editor?.layout();
  });

  resizeObserver.observe(editorElement);
  // editor.onDidFocusEditorText(() => {
  //   // refreshContent();
  // });
  editor.onDidChangeModelContent(() => {
    if (debounceTimer) clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      useTemplateStore().saveTemplateContentById(id.value, editor?.getValue());
      props.onChangContent(editor?.getValue());
      debounceTimer = null;
    }, props.debounce);
  });
  refreshContentByPropsId()
});
let templateConfig = ref({});
watch(
  () => props.path,
  (newVal) => {
    getFile(newVal, true).then((res: string) => {
      // console.log('lang.ts', lang.ts);
      editor?.setModel(monaco.editor.createModel(res, props.tempType));
    });
  }
);
watch(
  () => props.content,
  (newVal) => {
    // console.log('props.content');
    editor?.setModel(
      monaco.editor.createModel(newVal, props.tempType)
    );
  }
);
const type = ref('')
watch(
  () => props.tempType,
  (newVal) => {
    if (newVal) {
      type.value = props.tempType
      editor?.setModel(monaco.editor.createModel(editor?.getValue(), type.value));
    }
  }
);
watch(
  type,
  (newVal) => {
    if (newVal) {
      type.value = props.tempType
      editor?.setModel(monaco.editor.createModel(editor?.getValue(), type.value));
    }
  }
);
const refreshContentByPropsId = async () =>
{
  const res = await useTemplateStore().getTemplateContentById(
    id.value || props.templateId
  );
  templateConfig.value = res

  editor?.setModel(monaco.editor.createModel(res.content, res.lang));
  props.onChangContent(editor?.getValue())
};
const getQlEditorType = async () =>
{
  return templateConfig.value.lang
};
const id = ref(0)
watch(
  () => props.templateId,
  async () => {
    id.value = props.templateId
    await refreshContentByPropsId();
  },
  { deep: true }
);
watch(
  id,
  async () => {
    await refreshContentByPropsId();
  },
  { deep: true }
);
const props = defineProps({
  path: {
    type: String,
    default: null,
  },
  value: {
    type: String,
    default: '',
  },
  debounce: {
    type: Number,
    default: 100,
  },
  editorId: {
    type: String,
    default: '',
  },
  templateId: {
    type: Number,
    default: 0,
  },
  tempName: {
    type: String,
    default: '',
  },
  tempType: {
    type: String,
    default: '',
  },
  content: {
    type: String,
    default: '',
  },
  onChangContent: {
    type: Function,
    default: () => {
      //
    },
  },
  renderEditorId: {
    type: String,
    default: '',
  },
  // saveContent: {
  //   type: Function,
  //   default:saveEditorContent() ,
  // }
});

defineExpose({
  saveEditorContent,
  getEditorContent,
  refreshContent,
  getQlEditorType,
});
</script>
